<template>
	<div>

		<!-- <div class="add">
			<span>添加计量单位</span>
			<el-button icon="el-icon-plus" type='danger' circle  @click="drawer = true"></el-button>
		</div> -->
		
		<van-button icon="plus" type="primary" size="large" @click="drawer = true">添加计量单位</van-button>
		
		<el-drawer size="80%" 
		  title="添加计量单位"
		  :visible.sync="drawer"
		  :direction="direction"
		>
		  <el-input style="padding: 10px;" v-model="new_unit" placeholder="请输入添加的计量单位名称"></el-input>
		  <el-button type="primary" v-on:click='add_brand()'   style="display: block; width: 80%; margin: 10px auto;" >添加计量单位</el-button>
		</el-drawer>
		
		
		
		

		<div class="item" v-for='item in item_list'>
			<span>{{item.unit_name}}</span>
			
			<!-- <span class="ch">修改</span> -->
			<span class="del" @click="del_click(item.id, item.unit_name)">删除</span>
			
			<el-drawer size="40%"
			  title="删除的计量单位"
			  :visible.sync="drawerDel"
			  :direction="direction"
			>
			<div style="width: 100%;text-align: center;">当前删除的计量单位为：{{unit_name}}</div>
			  <!-- <el-input style="padding: 10px;" v-model="new_unit" placeholder="请输入添加的计量单位名称"></el-input> -->
			  <!-- <el-button type="primary" v-on:click='del_unit()' size="large">确认删除改计量单位</el-button> -->
				<van-button type="primary" size="large" v-on:click='del_unit()'>确认删除改计量单位</van-button>
			</el-drawer>
			
			
		</div>
		
		
		
		<div style="margin-bottom: 60px;width: 100%;"></div>

	</div>
</template>

<script>
	import {
		add_unit_url, select_all_unit_url, del_unit_url
	} from "../../utils/setting.js"
	export default {
		name: '',
		components: {},
		props: {},
		data() {
			return {
				item_list:[],
				drawer: false,
				drawerDel: false,
				direction: 'ttb',
				new_unit: '',
				unit_name: '',
				unit_id: '',
			}
		},
		methods: {
			add_brand(){
				this.$axios({
					method: 'GET',
					url: add_unit_url,
					params: { //这里是发送给后台的数据
						unit: this.new_unit,
					}
				}).then((response) => { //这里使用了ES6的语法
					console.log(response) //请求成功返回的数据
					if (response.data.status == 1) {
						
						
						this.$message({
							message: "单位："+this.new_unit+"   添加成功",
							type: 'success'
						})
						
						this.get_all_unit()
						this.drawer = false
					} else {
						console.log(response.data.errorMsg)
						// this.$Message.error('config')
						this.$message({
							message: response.data.errorMsg + '!!!',
							type: 'error'
						})
					}
				}).catch((error) => {
					// console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			},
			
			get_all_unit(){
				this.$axios({
					method: 'GET',
					url: select_all_unit_url,
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
					this.item_list = response.data.resultBody.reverse()
				}).catch((error) => {
					// console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			},
			
			del_click(unit_id, unit_name){
				this.unit_id = unit_id
				this.unit_name = unit_name
				this.drawerDel = true
			},
			del_unit(){
				
				this.$axios({
					method: 'POST',
					url: del_unit_url,
					data: this.qs.stringify({ //这里是发送给后台的数据
						unit_id: this.unit_id,
				
					})
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
					if (response.data.status == 1) {
						
						this.$notify({ type: 'success', message: '删除成功' });
						this.get_all_unit()
						
						this.drawerDel = false
				
						
					} else {
						// console.log(response.data.errorMsg)
						this.$notify({ type: 'error', message: '危险删除，如确需删除请联系系统管理员，具体原因：' + response.data.errorMsg });
					}
				}).catch((error) => {
					console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
				

				
			}
		
		},
		computed: {},
		watch: {},
		created() {},
		mounted() {
			
			this.get_all_unit()

		},
	}
</script>

<style scoped lang="less">
	.add {
		width: 100%;
		height: 60px;
		background-color: #F0F0F0;
		line-height: 60px;

		span {
			font-size: 20px;
			font-weight: 700;
			display: inline-block;
			margin-left: 20px;
		}

		.el-button {
			display: inline-block;
			margin-left: 20px;
		}
	}
	
	.item{
		position: relative;
		width: 100%;
		height: 45px;
		line-height: 45px;
		font-size: 18px;
		font-weight: 600;
		background-color: #F0F0F0;
		margin-top: 8px;
		span{
			margin-left: 10px;
		}
		
		.del{
			display: inline-block;
			position: absolute;
			right: 10px;
			font-weight: 400;
			color: darkred;
		}
		
		.ch{
			display: inline-block;
			position: absolute;
			right: 60px;
			font-weight: 400;
			color: seagreen;
		}
	}
</style>
